<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="模态框">
        模态框，用于向用户收集或展示信息，扩展 antd Modal 组件，比如拖拽，全屏等效果，
        <br />
        以下是 useModal
        方式，ref方式，也支持，使用方式和其他组件一致，如：modalRef.value.closeModal()
      </a-card>
    </div>
    <a-card :bordered="false" class="mt-3 proCard">
      <a-alert title="Modal嵌套Form" type="info">
        使用 useModal
        进行弹窗展示和操作，并演示了在Modal内和Form组件，组合使用方法，禁用点击蒙层关闭
      </a-alert>
      <a-divider />
      <a-space>
        <a-button type="primary" @click="openModal1">打开Modal嵌套Form例子</a-button>
      </a-space>
      <a-divider />

      <a-alert title="内部方法演示" type="info">
        使用 useModal 进行弹窗展示和操作，关闭弹窗，设置标题，更多用法，请参考文档
      </a-alert>
      <a-divider />
      <a-space>
        <a-button type="primary" @click="openModal2">打开演示</a-button>
      </a-space>
      <a-divider />
      <a-alert title="提示" type="info">
        组件暴露了，setProps 方法，用于修改组件内部
        Props，比如标题，等，具体参考UI框架文档，请参考文档
      </a-alert>
    </a-card>

    <Modal1 ref="modal1Ref" />
    <Modal2 ref="modal2Ref" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Modal1 from './Modal1.vue';
  import Modal2 from './Modal2.vue';

  const modal1Ref = ref(null);
  const modal2Ref = ref(null);

  function openModal1() {
    modal1Ref.value.openModal();
  }

  function openModal2() {
    modal2Ref.value.openModal();
  }
</script>

<style lang="less">
  .n-dialog.basicFormModal {
    width: 640px;
  }

  .n-dialog.basicModalLight {
    width: 410px;
  }
</style>

<style lang="less" scoped>
  .basicForm {
    padding-top: 20px;
  }

  .n-dialog.basicModalLight {
    width: 416px;
    padding-top: 26px;
  }
</style>
